<template>
    
    <el-card class="!border-none " shadow="never">
        
        <el-form class="-mb-4" :model="queryFormData" label-width="98px" inline>
            <el-card class="!border-none mt-5" shadow="never">
                
                <div class="flex justify-between items-center">
                    <div>
                        <el-button type="primary" @click="handleCreateOrder()">
                            <template #icon>
                                <icon name="el-icon-Plus"/>
                            </template>
                            添加客户
                        </el-button>
                    </div>
                    <div>
                        <Upload
                            mapping="crm/admin"
                            class="mr-3"
                            :data="{ id: props.id }"
                            type="excel"
                            :show-progress="true"
                            @change="refresh"
                        >
                            <el-button type="danger">本地上传</el-button>
                        </Upload>
                    </div>
                </div>
                
                
                <el-table
                    ref="tableRef"
                    size="large"
                    class="mt-2"
                    v-loading="pagerData.loading"
                    :data="pagerData.lists"
                    row-key="id"
                >
                    <el-table-column label="公司名称" fixed prop="companyName" min-width="150"/>
                    <el-table-column label="姓名" fixed prop="name" :show-overflow-tooltip="true" min-width="120"/>
                    <el-table-column label="电话" fixed prop="phone" min-width="120"/>
                    <el-table-column label="部门" prop="department" min-width="120"/>
                    <el-table-column label="职位" prop="position" min-width="120"/>
                    <el-table-column label="中间人" prop="intermediary" min-width="120"/>
                    <el-table-column label="关注点" fixed prop="concerns" min-width="180"/>
                    <el-table-column label="子女" prop="childrenSituation" min-width="120"/>
                    <el-table-column label="是否交涉" prop="isGif" :formatter="formatIsGif" min-width="160"/>
                    
                    <el-table-column label="兴趣爱好" prop="hobbies" min-width="160"/>
                    <el-table-column label="建单时间" prop="createTime " min-width="180"
                                     :formatter="formatterCreateTime"/>
                    <el-table-column label="操作人" prop="optPerson" min-width="150"/>
                    
                    <el-table-column label="操作" width="170" fixed="right">
                        <template #default="{ row }">
                            <el-button
                                type="primary"
                                link
                                @click="handleRowDetail(row)"
                            >
                                详情
                            </el-button>
                            
                            
                            <el-button
                                type="primary"
                                link
                                @click="handleEdit(row)"
                            >
                                编辑
                            </el-button>
                            
                            
                            <el-button
                                type="danger"
                                link
                                @click="handleDelete(row)"
                            >
                                删除
                            </el-button>
                        </template>
                    </el-table-column>
                </el-table>
                
                <pagination v-model="pagerData" @change="getPageLists"/>
            
            </el-card>
        
        </el-form>
    </el-card>
    
    <Detail ref="detailRef" @close="showDetailRef=false" v-if="showDetailRef"/>
    
</template>

<script lang="ts" setup>
import {ref, onMounted, defineProps} from 'vue';
import Detail from "@/views/logistics/client/clientList/detail.vue";
import {useFormatterTimeManager} from "@/manager/base/FormatterManager";
import CrmAdminSearchRequest from "@/api/logistics/request/CrmAdminSearchRequest";
import {UnwrapNestedRefs} from "@vue/reactivity";
import {usePagerManager} from "@/manager/base/PagerManager";
import {delLogisticsAdmin, getLogisticsAdminListByPage} from "@/api/logistics/CrmLogisticsAdminController";
import routerManager from "@/manager/base/RouterManager";
import router from "@/base/router";
import feedback from "@/utils/feedback";
import CrmLogisticsAdminDTO from "@/api/logistics/dto/CrmLogisticsAdminDTO";

// 接收父组件传来的id
const props = defineProps<{
    id: number | null;
}>();

const detailRef = shallowRef(Detail)
const showMore = ref(true)
const showDetailRef = ref(false)
let {formatterCreateTime} = useFormatterTimeManager();

let queryFormData: UnwrapNestedRefs<CrmAdminSearchRequest> = reactive(new CrmAdminSearchRequest())


const {pagerData, getPageLists, resetParams, resetOnePage} = usePagerManager({
    fetchFun: getLogisticsAdminListByPage,
    params: queryFormData
})


const formatIsGif = (cellValue: number) => {
    return cellValue === 1 ? '已交涉' : '未交涉';
};


function handleCreateOrder() {
    let routePathByName = routerManager.getRoutePathByName("logistics/client/clientList/create");
    console.log(routePathByName)
    if (routePathByName) {
        router.push(routePathByName)
    }
}


async function handleEdit(row: any) {
    let routePathByName = routerManager.getRoutePathByName("logistics/client/clientList/edit");
    console.log(routePathByName)
    if (routePathByName) {
        await router.push({path: routePathByName, query: {id: row.id}});
    }
}

async function handleDelete(row: any) {
    await feedback.confirm("确定删除这条记录吗？")
    await delLogisticsAdmin({id: row.id})
    await getPageLists()
}


async function handleRowDetail(row: CrmLogisticsAdminDTO) {
    showDetailRef.value = true
    await nextTick()
    detailRef.value?.open(row.id)
}

function refresh() {
    getPageLists()
}

onMounted(async () => {
    if (props.id) {
        queryFormData.corporationId = props.id
    }
    getPageLists()
});

</script>